<template>
    <div class="app-container mod-hot-search">
      <!-- 搜索相关区域 -->
      <div class="filter-container">
        <el-form :inline="true" :model="pageQuery" class="demo-form-inline">
          <el-form-item label="手机号码">
            <el-input
              v-model="pageQuery.phone"
              size="mini"
              placeholder="请输入手机号码"
            />
          </el-form-item>
  
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="pageQuery.time"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="骑手类型">
            <el-select v-model="pageQuery.riderType" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="apiPage()"
              >查询</el-button
            >
            <el-button
              size="mini"
              icon="el-icon-delete"
              @click="clearSearchInfo()"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <!-- 列表相关区域 -->
      <el-table
        v-loading="pageLoading"
        :data="pageVO.list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <!-- 订单编号 -->
        <el-table-column label="人员名称" prop="riderName" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.riderName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" prop="phone" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.phone }}</span>
          </template>
        </el-table-column>
        <!-- 所属商品 -->
        <el-table-column
          label="骑手类型"
          prop="leixing"
          width="250"
          align="center"
        >
        <template slot-scope="{ row }">
          <p :class="row.riderType == '1' ? 'ee1' : 'ee2'">
            {{ row.riderType == 1 ? "全职" : "兼职" }}
          </p>
        </template>
        </el-table-column>
        <!-- 订单数量 -->
        <el-table-column label="接单区域" prop="area" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.area }}</span>
          </template>
        </el-table-column>
        <el-table-column label="身份证" prop="frontImg" align="center"  width="180">
          <template slot-scope="{ row }">
            <img style="width: 100px;" :src="row.frontImg" alt="">
          </template>
        </el-table-column>
        <el-table-column label="健康证" prop="healthyImg" align="center"  width="180">
          <template slot-scope="{ row }">
            <img style="width: 100px;" :src="row.healthyImg" alt="">
          </template>
        </el-table-column>
  
        <el-table-column label="创建时间" prop="createTime" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.dateTime }}</span>
          </template>
        </el-table-column>
  
        <el-table-column
          :label="$t('table.actions')"
          align="center"
          width="200"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="{ row }">
            <el-button type="primary" size="mini" @click="goDetail(row,1)">
              通过
            </el-button>
            <el-button
              type="primary"
              size="mini"
              @click="goDetail(row,-1)"
            >
              不通过
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页条 -->
      <pagination
        v-show="pageVO.total > 0"
        :total="pageVO.total"
        :page.sync="pageQuery.pageNum"
        :limit.sync="pageQuery.pageSize"
        @pagination="apiPage()"
      />
     
    </div>
  </template>
    
    <script>
  import permission from "@/directive/permission/index.js";
  import Pagination from "@/components/Pagination";
  import * as api from "@/api/platform/rider.js";

  
  export default {
    name: "",
    components: { Pagination },
    directives: { permission },
    data() {
      return {
        options: [{
          value: '2',
          label: '兼职'
        }, {
          value: '1',
          label: '全职'
        }],
        value: '',
          pageLoading:false,
        // 查询的参数
        pageQuery: {
          pageSize: 5,
          pageNum: 1,
          status:0,
          phone:null,
          riderType:null,
        },
  
        // 返回参数
        pageVO: {
          list: [], // 返回的列表
          total: 0, // 一共多少条数据
          pages: 0, // 一共多少页
        },
      };
    },
    mounted() {
      this.apiPage()
    },
    methods: {
      apiPage() {
        console.log(this.pageQuery);
      api.barRiderList(this.pageQuery).then((res) => {
            this.pageVO.list=res.list
        this.pageVO.total = res.total;
        this.pageVO.pages = res.pages;
      });
    },
    
      goDetail(val,index) {
          api.putStatus({riderId:val.riderId,status:index}).then(res=>{
            if(index==1){
              this.$message({
                message: "已审核",
                type: "success",
              });
            }else{
              this.$message({
                message: "已拒绝",
                type: "success",
              });
            }
            
              this.apiPage()
          })        
      },
  
      clearSearchInfo() {
        // 若请求参数某项没值，则不传此参数
        this.pageQuery.pageNum = 1;
        this.pageQuery.pageSize = 5;
        this.pageQuery.phone=null;
        this.pageQuery.riderType=null;
  
        this.apiPage();
      },
    },
  };
  </script>
    
    <style lang="scss" scoped>
  .mod-hot-search {
    .el-form--inline {
      .el-form-item {
        margin-right: 20px;
      }
    }
  }
  .ee1{
      background-color: rgba(31, 99, 255, 0.2);
      color: rgb(31, 99, 255);
      text-align: center;
      padding: 5px 10px;
      border-radius: 10px;
      width: 40%;
      margin-left: 30%;
  }
  
  .ee2{
      background-color: rgba(253, 209, 67, 0.3);
      color: rgb(244, 187, 0);
      text-align: center;
      padding: 5px 10px;
      border-radius: 10px;
      width: 40%;
      margin-left: 30%;
  
  }
  
  </style>
    